import React from "react";
// 引入地区数据
import { areaList } from '@vant/area-data'

const Profile = () => {
    const navigate = React.$Router.useNavigate()

    // 初始化表单对象
    const [form] = React.$Vant.Form.useForm()

    const [LoginAuth, setLoginAuth] = React.useState(React.$LoginAuth)

    // 显示性别选择器
    const [GenderShow, SetGenderShow] = React.useState(false)

    // 性别数据
    const [GenderList, setGenderList] = React.useState([
        { text: '保密', value: 0 },
        { text: '男', value: 1 },
        { text: '女', value: 2 }
    ])

    // 地区显示状态
    const [RegionShow, SetRegionShow] = React.useState(false)
    const [region, SetRegion] = React.useState('')
    const [code, SetCode] = React.useState([])

    // 确认选择地区
    const RegionConfirm = (_, values) => {
        let [province, city, district] = values

        let region_text = ''
        let code = []

        if (province.value) {
            region_text = province.text + '-'
            code.push(province.value)
        }

        if (city.value) {
            region_text += city.text + '-'
            code.push(city.value)
        }

        if (district.value) {
            region_text += district.text
            code.push(district.value)
        }

        SetRegion(region_text)
        SetCode(code)
        SetRegionShow(false)
    }

    // 头像状态
    const [avatar, SetAvatar] = React.useState([
        { url: LoginAuth.avatar_cdn }
    ])

    const loginAuth = React.$Cookies.load('LoginAuth')

    React.useEffect(() => {
        let code = []

        if (LoginAuth.province) {
            code.push(LoginAuth.province)
        }

        if (LoginAuth.city) {
            code.push(LoginAuth.city)
        }

        if (LoginAuth.district) {
            code.push(LoginAuth.district)
        }

        SetCode(code)


        SetRegion(LoginAuth.region_text)
    }, [])

    const GenderConfirm = (_, values) => {
        LoginAuth.gender = values.value
        LoginAuth.gender_text = values.text
        setLoginAuth(LoginAuth)
        SetGenderShow(false)
    }

    // 提交
    const onProfile = async (values) => {
        let data = {
            busid: LoginAuth.id,
            email: values.email,
            nickname: values.nickname,
            gender: LoginAuth.gender,
        }

        if (JSON.stringify(code) !== '[]') {
            let [province, city, district] = code
            data.code = district
        }

        if (values.password) {
            data.password = values.password
        }

        let file = values.avatar[0].file ? values.avatar[0].file : {}

        if (file) {
            data.avatar = file
        }

        let result = await React.$Api.profile(data)

        if (result.code === 1) {
            React.$Vant.Toast({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    React.$Cookies.save('LoginAuth', result.data, { path: '/' })
                    navigate('/business/base/index')
                }
            })
        } else {
            React.$Vant.Toast.fail(result.msg)
            return false
        }
    }

    const onBack = () => {
        navigate(-1)
    }

    const FromFooter = () => {
        return (
            <div style={{ margin: '16px 16px 0' }}>
                <React.$Vant.Button round='true' nativeType='submit' type='primary' block='true'>
                    提交
                </React.$Vant.Button>
            </div>
        )
    }

    return (
        <>
            <div className="my_kuang">
                {/* 导航 */}
                <React.$Vant.NavBar
                    title="基本资料"
                    leftText="返回"
                    onClickLeft={onBack}
                />

                {/* 显示头像 */}
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        {/* 头像组件 */}
                        <div className="toux_hou">
                            <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginAuth.avatar_cdn} alt="" />
                        </div>
                    </div>
                </div>

                {/* 表单 */}
                <div className="profile">
                    <React.$Vant.Form
                        form={form}
                        onFinish={onProfile}
                        footer={
                            <FromFooter></FromFooter>
                        }
                        border
                        colon
                        labelAlign='right'
                    >

                        {/* 手机号 */}
                        <React.$Vant.Form.Item
                            name='mobile'
                            label='手机号'
                            labelWidth='55'
                            initialValue={LoginAuth.mobile}
                        >
                            <React.$Vant.Input placeholder='请输入手机号' readOnly />
                        </React.$Vant.Form.Item>

                        {/* 昵称 */}
                        <React.$Vant.Form.Item
                            rules={[{ required: true, message: '请填写昵称' }]}
                            name='nickname'
                            label='昵称'
                            labelWidth='55'
                            initialValue={LoginAuth.nickname}
                        >
                            <React.$Vant.Input placeholder='请输入昵称'/>
                        </React.$Vant.Form.Item>

                        {/* 邮箱 */}
                        <React.$Vant.Form.Item
                            rules={[{ required: true, message: '请填写邮箱' }]}
                            name='email'
                            label='邮箱'
                            labelWidth='55'
                            initialValue={LoginAuth.email || ''}
                        >
                            <React.$Vant.Input placeholder='请输入邮箱' />
                        </React.$Vant.Form.Item>

                        {/* 密码 */}
                        <React.$Vant.Form.Item
                            name='password'
                            label='密码'
                            labelWidth='55'
                        >
                            <React.$Vant.Input type='password' placeholder='留空不修改密码' />
                        </React.$Vant.Form.Item>

                        {/* 性别 */}
                        <React.$Vant.Form.Item
                            label="性别"
                            onClick={() => { SetGenderShow(true) }}
                            isLink
                            labelWidth='55'
                        >
                            <React.$Vant.Input placeholder="请选择性别" readonly value={LoginAuth.gender_text || ''} />
                        </React.$Vant.Form.Item>

                        <React.$Vant.Popup position="bottom" round visible={GenderShow} onClose={() => { SetGenderShow(false) }}>
                            <React.$Vant.Picker
                                title="性别"
                                columns={GenderList}
                                defaultValue={LoginAuth.gender * 1}
                                onConfirm={GenderConfirm}
                                onCancel={() => { SetGenderShow(false) }}
                            />
                        </React.$Vant.Popup>

                        {/* 地区 */}
                        <React.$Vant.Form.Item
                            label="地区"
                            labelWidth='55'
                            onClick={() => { SetRegionShow(true) }}
                            isLink
                        >
                            <React.$Vant.Input placeholder="请选择地区" readOnly value={region} />
                        </React.$Vant.Form.Item>

                        <React.$Vant.Popup position="bottom" round visible={RegionShow} onClose={() => { SetRegionShow(false) }}>
                            <React.$Vant.Area
                                title="选择地区"
                                value={code}
                                areaList={areaList}
                                onConfirm={RegionConfirm}
                                onCancel={() => SetRegionShow(false)}
                            />
                        </React.$Vant.Popup>

                        {/* 上传头像 */}
                        <React.$Vant.Form.Item
                            label="头像"
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='avatar'
                            initialValue={
                                [
                                    {
                                        url: LoginAuth.avatar_cdn
                                    }
                                ]
                            }
                        >
                            <React.$Vant.Uploader maxCount={1} value={avatar} />
                        </React.$Vant.Form.Item>

                    </React.$Vant.Form>
                </div>

            </div>
        </>
    )
}

export default Profile